<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$.post(
				"/JavaWeb1907/area?method=selectProvince",
				function(jsonArray){
					console.log(jsonArray);
					$(jsonArray).each(function(){
						// <option value="001">山东省</option>
						var html = "<option value='"+this.id+"'>"+this.province+"</option>";
						$("#provinceId").append(html);
					});
				},
				"json"
			);
		});
		
		function selectCity(province){
			var provinceId = $(province).val();
// 			$("#cityId").empty();
			$("#cityId option:gt(0)").remove();
			$.post(
				"/JavaWeb1907/area?method=selectCity",
				{"provinceId" : provinceId},
				function(jsonArray){
					console.log(jsonArray);
// 					$("#cityId").append("<option>--请选择--</option>");
					$(jsonArray).each(function(){
						// <option value="001">山东省</option>
						var html = "<option value='"+this.id+"'>"+this.city+"</option>";
						$("#cityId").append(html);
					});
				},
				"json"
			);
		}
		
		function selectArea(city){
			var cityId = $(city).val();
// 			$("#areaId").empty();
			$("#areaId option:gt(0)").remove();
			$.post(
				"/JavaWeb1907/area?method=selectArea",
				{"cityId" : cityId},
				function(jsonArray){
					console.log(jsonArray);
// 					$("#areaId").append("<option>--请选择--</option>");
					$(jsonArray).each(function(){
						var html = "<option value='"+this.id+"'>"+this.area+"</option>";
						$("#areaId").append(html);
					});
				},
				"json"
			);
		}
	</script>
</head>
<body>
	省份：<select id="provinceId" onchange="selectCity(this)">
		<option>--请选择--</option>
	</select>
	市：<select id="cityId" onchange="selectArea(this)">
		<option>--请选择--</option>
	</select>
	区县：<select id="areaId">
		<option>--请选择--</option>
	</select>
</body>
</html>